import React, { Component } from 'react';
import req from '../http/req'
import { InfiniteScroll, List, SearchBar, Toast } from 'antd-mobile';
import EditDialog from './EditDialog';
import AddDialog from './AddDialog';
import Pop from './Pop';
import url from '../config/url'
var lala = []
class User extends Component {
    state = {
        users: [],
        panduanUser: [],
        page: 1,//默认从第一页展开数据
        limit: 10,//默认一页10条
        total: 0,//默认总条数
        uid: null,
        visiableE: false,
        visiableP: false,
        visiableA: false,
        panduan: false,
        hasMore: true,
        finished: true
    }
    render() {
        return (
            <div style={{ position: 'relative' }}>

                {!this.state.panduan &&
                    <div>
                        <List header='用户列表'><SearchBar placeholder='请输入内容' showCancelButton onChange={(value) => {
                            if (value) {
                                this.state.users.map(user => {
                                    if (user.username.includes(value)) {
                                        lala.push(user)
                                        this.setState({
                                            panduan: true,
                                            panduanUser: lala
                                        })
                                    }
                                })
                            } else {
                                lala = []
                                this.setState({
                                    panduan: false,
                                })
                            }

                        }} />
                            {/* 添加 */}
                            <button
                                size='small'
                                onClick={this.add}
                                style={{ position: 'absolute', right: '10px', top: '2px', border: 0, color: '#2daae8', borderRadius: '4px' }}
                            >添加</button>
                            {this.state.visiableA && (
                                <AddDialog
                                    closeDrawer={this.closeDrawer}
                                    fup={this.fup}
                                />
                            )}
                            {this.state.users.map(user => (
                                <List.Item
                                    key={user.id}
                                    style={{ border: '1px solid #ccc', position: 'relative' }}
                                >
                                    {user.username}
                                    <button
                                        size='small'
                                        onClick={() => this.pop(user.id)}
                                        style={{ position: 'absolute', right: '120px', border: 0, color: '#2daae8', borderRadius: '4px',fontSize: '14px' }}
                                    >详情</button>
                                    <button
                                        size='small'
                                        onClick={() => this.edit(user.id)}
                                        style={{ border: 0, color: '#2daae8', position: 'absolute', right: '65px', borderRadius: '4px',fontSize: '14px' }}
                                    >编辑</button>
                                    <button
                                        size='small'
                                        onClick={() => {
                                            req.delete(url.DeleteUserData + `/${user.id}`).then(res => {
                                                if (res.data.errNo === 0) {
                                                    user.status = '2'
                                                    Toast.show({
                                                        icon: 'success',
                                                        content: '禁用成功',
                                                    })
                                                }
                                            })
                                        }}
                                        style={{ border: 0, color: '#2daae8', position: 'absolute', right: '10px', borderRadius: '4px',fontSize: '14px' }}
                                    >删除</button>
                                </List.Item>))}
                        </List>
                        {/* <InfiniteScroll loadMore={this.loadMore} hasMore={this.state.hasMore} /> */}
                    </div>
                }
                {this.state.panduan &&
                    <div>
                        <List header='查询到的用户列表'>
                            {this.state.panduanUser.map(user => (
                                <List.Item key={user.id} style={{ border: '1px solid #ccc', position: 'relative' }}>
                                    {user.username}
                                    <button
                                        size='small'
                                        onClick={() => this.pop(user.id)}
                                        style={{ position: 'absolute', right: '120px', border: 0, color: '#2daae8', borderRadius: '4px' }}
                                    >详情</button>
                                    <button
                                        size='small'
                                        onClick={() => this.edit(user.id)}
                                        style={{ border: 0, color: '#2daae8', position: 'absolute', right: '65px', borderRadius: '4px' }}
                                    >编辑</button>
                                    <button
                                        size='small'
                                        onClick={() => {
                                            req.delete(url.DeleteUserData + `/${user.id}`).then(res => {
                                                console.log(res);
                                                if (res.data.errNo === 0) {
                                                    user.status = '2'
                                                }
                                            })
                                        }}
                                        style={{ border: 0, color: '#2daae8', position: 'absolute', right: '10px', borderRadius: '4px' }}
                                    >删除</button>
                                </List.Item>))}
                        </List>

                    </div>

                }
                <InfiniteScroll loadMore={this.loadMore} hasMore={this.state.hasMore} />

                {/* 编辑 */}
                {this.state.visiableE && (
                    <EditDialog
                        uid={this.state.uid}
                        closeDrawer={this.closeDrawer}
                        fup={this.fup}
                    />
                )}
                {/* 查询 */}
                {this.state.visiableP && (
                    <Pop
                        uid={this.state.uid}
                        closeDrawer={this.closeDrawer}
                    />
                )}
            </div>

        );
    }
    edit = (id) => {
        // 点击编辑，设置id及修改弹框显示
        this.setState({
            uid: id,
            visiableE: true,
        })
    }
    pop = (id) => {
        // 点击编辑，设置id及修改弹框显示
        this.setState({
            uid: id,
            visiableP: true,
        })
    }
    add = () => {
        // 点击编辑，设置id及修改弹框显示
        this.setState({
            visiableA: true,
        })
    }

    closeDrawer = () => {
        this.setState({
            visiableE: false,
            visiableA: false,
            visiableP: false,
        })
    }
    // 刷新页面数据
    fup = () => {
        const { page } = this.state
        this.loadMore(page)
    }
    loadMore = async () => {
        const append = await req.get(url.GetUserList, {
            params: {
                page: this.state.page
            }
        });
        this.setState({
            users: [...this.state.users, ...append.data.paginate.data],
            hasMore: append.data.paginate.data.length > 0,
            finished: append.data.paginate.data.length !== 10
        })
        var c = this.state.page + 1
        this.setState({
            page: c
        })
    }
}

export default User;

